<template>
  
    <div class="box">
      <p><img src="../../assets/jinri.png" class="img-1" alt=""><span>更对新品<img src="../../assets/jinru.png" alt=""></span></p>
      <div class="swiper " >
      <div class="swiper-wrapper">
        <div class="swiper-slide x" v-for="item in tu">
          <div class="Shang">
            <img :src="item.URL" alt="">
            <p>{{item.type}} </p>
          </div>
           <p class="pp">{{item.money}} </p>
        </div>
      </div>
    </div>
    </div>
</template>

<script>
import yezi from '../../assets/yezi.jpeg'

import swiper from 'swiper'
export default {
    name:'Carousel',
    data() {
      return {
        tu:[
          {
            URL:yezi,
            type:'2人得商品 16...',
            money:'￥35.5'
          },{
            URL:yezi,
            type:'2人得商品 16...',
            money:'￥35.5'
          },{
            URL:yezi,
            type:'2人得商品 16...',
            money:'￥35.5'
          },{
            URL:yezi,
            type:'2人得商品 16...',
            money:'￥35.5'
          },{
            URL:yezi,
            type:'2人得商品 16...',
            money:'￥35.5'
          },{
            URL:yezi,
            type:'2人得商品 16...',
            money:'￥35.5'
          },
        ]
      }
    },
    mounted() {
       new swiper(".swiper", {
        slidesPerView: 3.7,
        spaceBetween: 5,
        freeMode: true,
      });
    },
}
</script>

<style lang="less" scoped>
    @import"../../../node_modules/swiper/swiper.min.css";
     .box{
       width: 100%;
       height: 8rem;
       background-color: #fff;
       margin-top:1rem ;
       padding-left:0.5rem ;
       box-sizing: border-box;
       p{
         display: flex;
         justify-content: space-between;
         align-items: center;
         .img-1{
           width: 4rem;
           margin: 0.5rem 0.5rem 0.5rem 0;
         }
         span{
           font-size: 0.5rem;
           margin-right:0.5rem ;
           vertical-align: text-top;
           img{
             width: 0.4rem;
             margin:0 0 -0.1rem  0.2rem ;
           }
         }
       }
     }
     .swiper {
        height: 6rem;
      }
      .x {
        width: 8rem;
        text-align: center;
       
        /* Center slide text vertically */
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        .Shang{
          font-size: 0.5rem;
          background-image: linear-gradient(to right, rgb(219, 125, 125) , rgb(214, 81, 63));
          border-radius: 5px;
          color: rgb(255, 255, 255);
          img{
            border-radius: 5px 5px 0 0;
          }
        }
        .pp{
          font-size: 0.7rem;
          color: rgb(223, 59, 59);
        }
      }
      .x img {
        display: block;
        width: 5rem;
        
        object-fit: cover;
      }
</style>